<template>
  <div style="width: 100%;" class="card-area">
    <layout-content topTitle="" bottomTitle="点赞排行榜">
      <!-- 表格区域 -->
      <template v-slot:bottomCard>
        <a-table
          ref="TableInfo"
          :columns="columns"
          rowKey="id"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading"
          :scroll="{ x: 900 }"
        ></a-table>
      </template>
    </layout-content>
  </div>
</template>

<script>
import columns from './columns';
import apiURL from './requestURL';
import layoutContent from '@/components/tool/layout-content';

export default {
  name: 'mainPage',
  components: { layoutContent },
  data() {
    return {
      // params: {},
      columns, // 表头字段
      apiURL, // 接口url
      dataSource: [],
      loading: false
    };
  },
  created() {},
  mounted() {
    this.fetch();
  },
  methods: {
    // ------------------------- 网络请求 -------------------------
    // 1.查询记录
    fetch(params = {}) {
      this.loading = true;
      params.sortField = 'up';
      params.limit = 20;
      console.log(params);
      this.$post(apiURL.getRecords, {
        ...params
      }).then(r => {
        console.log(r);
        let data = r.data.data;
        this.dataSource = data;
        this.loading = false;
      }).catch(e => {
        console.error(e);
        this.loading = false;
      });
    },
  }
};
</script>

<style lang="less" scoped>
.card-area {
  .extra-btn {
    width: 86px;
  }
}
</style>
